<template>
  <div class="main-area">
    <div class="search-area">
      <Form :model="searchObject" :label-width="80">
      <Row :gutter="16">
          <Col span="8">
            <FormItem label="状态码">
                <Input v-model="code"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <Button type="primary" shape="circle" icon="ios-search">Search</Button>
            <Button shape="circle" icon="ios-refresh-circle-outline">Reset</Button>
          </Col>
      </Row>
      </Form>
    </div>

    <TScope
    :tableData="dataList"
    :columns="columns"
    :loadingT="loadingTb"
    :total="tableTotal"
    @handle-select="handleSelectRow"
    @handle-change="handlePageChange"
    @handle-page-size-change="handlePageSizeChange"
    />

  </div>
</template>

<script>
import TScope from '@/components/TableScope/index.vue';
import TableMinix from '@/utils/tableMinix.js';
import { statusCodeList } from '@/request/api.js';
const dataLabel = [
  { type: 'selection', width: 60, align: 'center' },
  { title: '状态码', key: 'code' },
  { title: '说明', key: 'title' },
  { title: '描述', slot: 'desc' },
  {
    title: 'Action',
    key: 'action',
    width: 150,
    align: 'center',
    render: (h, params) => {
      return h('div', [
        h('Button', {
          props: {
            type: 'primary',
            size: 'small'
          },
          style: {
            marginRight: '5px'
          },
          on: {
            click: () => {
              window.show(params);
            }
          }
        }, '详情'),
        h('Button', {
          props: {
            type: 'error',
            size: 'small'
          },
          on: {
            click: () => {
              window.remove(params);
            }
          }
        }, '删除')
      ]);
    }
  }
];
export default{
  data() {
    return {
      searchObject: {
        _page: 1,
        _limit: 10
      },
      code: '',
      dataList: [],
      tableTotal: 0,
      columns: dataLabel,
      loadingTb: true
    };
  },
  components: {
    TScope
  },
  mixins:[TableMinix],
  created() {
    this.getList();
  },
  methods:{
    getList() {
      statusCodeList(this.searchObject).then((res) => {
        console.log('userList', res);
        this.dataList = res;
        this.loadingTb = false;
      }).catch((err) => {
        console.log(err);
      });

      statusCodeList().then((res) => {
        this.tableTotal = res.length;
      }).catch((err) => {
        console.log(err);
      });
    },
    handleSearch() {
      this.searchObject.code = this.code;
      this.getList();
    },
    handleReset() {
      delete this.searchObject.code;
      this.code = '';
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-form-item{
  margin: 0;
}
</style>
